<template>
    <view class="search">
        <view class="fixbg">
        </view>
        <music-head :show-icon="true" title="搜索" :icon-black="true"></music-head>
        <view class="container" v-show="!isLoading">
            <scroll-view scroll-y="true">
                <!-- <view class="index-search" @tap="handleToSearch"> -->
                <view class="search-search">
                    <text class="iconfont iconsearch"></text>
                    <input
                        type="text"
                        placeholder="搜索歌曲"
                        v-model="searchWord"
                        @confirm="handleSearch"
                        @input="handleInputChange"
                    />
                    <text
                        class="iconfont iconguanbi"
                        v-show="searchType !== 1"
                        @tap="handleToClose"
                    ></text>
                </view>
                <block v-if="searchType === 1">
                    <view class="search-history" v-if="searchHistory.length">
                        <view class="search-history-head">
                            <text>历史记录</text>
                            <text class="iconfont iconlajitong" @tap="handleClear"></text>
                        </view>
                        <view class="search-history-list">
                            <!-- <view>少年</view> -->
                            <view
                                v-for="(item, index) in searchHistory"
                                :key="index"
                                @tap="handleHistoryWordTap(item)"
                            >{{item}}</view>
                        </view>
                    </view>
                    <view class="search-hot">
                        <view class="search-hot-head">热搜榜</view>
                        <!-- <view class="search-hot-item">
                            <view class="item-index">1</view>
                            <view class="item-word">
                                <view>
                                    少年
                                    <image src="../../static/sq.png" mode="aspectFit"></image>
                                </view>
                                <view>
                                    这个词实在太美
                                </view>
                            </view>
                            <view class="item-count">123456</view>
                        </view> -->
                        <view
                            class="search-hot-item"
                            v-for="(item, index) in searchHot"
                            :key="index"
                            @tap="handleWordTap(item.searchWord)"
                        >
                            <view class="item-index">{{index + 1}}</view>
                            <view class="item-word">
                                <view>
                                    {{item.searchWord}}
                                    <image :src="item.iconUrl" mode="aspectFit"></image>
                                </view>
                                <view>
                                    {{ item.content }}
                                </view>
                            </view>
                            <view class="item-count">{{item.score}}</view>
                        </view>
                    </view>
                </block>
                
                <block v-else-if="searchType === 2">
                    <view class="search-result">
                        <view
                            class="search-result-item"
                            v-for="(item, index) in searchList"
                            :key="index"
                            @tap="handleToDetail(item.id)"
                        >
                            <view class="item-word">
                                <view>
                                    {{item.name}}
                                </view>
                                <view>
                                    <image src="../../static/sq.png" mode=""></image>{{ item.artists[0].name }} --- {{item.album.name}}
                                </view>
                            </view>
                            <text class="iconfont iconbofang"></text>
                        </view>
                    </view>
                </block>
                
                <block v-else-if="searchType === 3">
                    <view class="search-suggest">
                        <view
                            class="search-suggest-head"
                            v-show="searchWord"
                        >
                            搜索 "{{searchWord}}"
                        </view>
 <!--                       <view class="search-suggest-item">
                            <text class="iconfont iconsearch"></text>
                            少年抖音
                        </view> -->
                        <view
                            class="search-suggest-item"
                            v-for="(item, index) in searchSuggest"
                            :key="index"
                            @tap="handleHistoryWordTap(item.keyword)"
                        >
                            <text class="iconfont iconsearch"></text>
                            {{item.keyword}}
                        </view>
                    </view>
                </block>

            </scroll-view>
        </view>
    </view>
</template>

<script>
    import musicHead from "../../components/music-head/music-head.vue";
    import {
        searchHot,
        searchWord,
        searchSuggest
    } from '../../common/api.js'
    
    export default {
        comments: {
            musicHead,
        },
        onLoad() {
            searchHot().then(res => {
                uni.getStorage({
                    key: 'searchHistory',
                    success: (res) => {
                        this.searchHistory = res.data;
                    }
                })
                console.log('----res: ', res);
                if (res[1].data.code === 200) {
                    // console.log('---res[1].data.data--:', res[1].data.data);
                    this.searchHot = res[1].data.data;
                }
            })
        },
        data() {
            return {
                isLoading: false,
                // isLoading: true,
                searchHot: [],
                searchWord: '',
                searchHistory: [],
                // searchType: 1,
                // searchType: 2,
                searchType: 3,
                searchList: [],
                searchSuggest: [],
            };
        },
        methods: {
            handleWordTap(word) {
                this.searchWord = word;
            },
            handleSearch() {
                this.searchHistory.unshift(this.searchWord);
                this.searchHistory = [...new Set(this.searchHistory)];
                if (this.searchHistory.length > 10) {
                    this.searchHistory.length = 10;
                }
                
                uni.setStorage({
                    key: 'searchHistory',
                    data: this.searchHistory
                }),
                
                this.getSearchList(this.searchWord)
            },
            handleClear() {
                uni.removeStorage({
                    key : 'searchHistory',
                    success: () => {
                        this.searchHistory = [];
                    }
                })
            },
            getSearchList(word) {
                searchWord(word).then(res => {
                    console.log('--ftf--res: ', res);
                    if (res[1].data.code === 200) {
                        this.searchList = res[1].data.result.songs;
                        this.searchType = 2;
                    }
                })
            },
            handleToClose(){
                this.searchWord = '';
                this.searchType = 1;
            },
            handleToDetail(songId) {
                uni.navigateTo({
                    url: '/pages/detail/detail?songId=' + songId,
                });
            },
            handleHistoryWordTap(word) {
                this.searchWord = word;
                this.handleSearch();
            },
            handleInputChange(evt) {
                const value = evt.detail.value;
                // console.log(evt, '---evt');
                if (!value) {
                    this.searchType = 1;
                }
                
                searchSuggest(value).then(res => {
                    console.log('--res: ', res);
                    if(res[1].data.code === 200) {
                        this.searchSuggest = res[1].data.result.allMatch;
                        this.searchType = 3;
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    // @import url('../../common/common-mixins.scss');
    .search {
        &-search {
            display: flex;
            align-items: center;
            height: 70rpx;
            margin: 70rpx 30rpx 50rpx 30rpx;
            border-radius: 50px;
            background: #f7f7f7;

            text {
                margin: 0 26rpx;
            }

            input {
                flex: 1;
                font-size: 26rpx;
            }
        }

        &-history {
            margin: 0 30rpx 50rpx 50rpx;
            font-size: 26rpx;

            &-head {
                display: flex;
                justify-content: space-between;
                margin-bottom: 36rpx;
            }

            &-list {
                display: flex;
                flex-wrap: wrap;
                view {
                    padding: 16rpx 28rpx;
                    border-radius: 40rpx;
                    margin: 0 30rpx 30rpx 0;
                    background: #f7f7f7;
                }
            }
        }

        &-hot {
            // border: 1px solid #000;
            margin: 0 30rpx;
            font-size: 26rpx;

            &-head {
                // border: 1px solid #000;
                margin-bottom: 36rpx;
            }

            &-item {
                display: flex;
                align-items: center;
                margin-bottom: 58rpx;

                .item-index {
                    color: #fb2222;
                    width: 60rpx;
                    margin-left: 8rpx;
                }

                .item-word {
                    flex: 1;

                    view:nth-child(1) {
                        font-size: 30rpx;
                        color: black;

                        image {
                            width: 48rpx;
                            height: 22rpx;
                        }
                    }

                    view:nth-child(2) {
                        font-size: 24rpx;
                        color: #878787;
                    }
                    image {}
                }

                .item-count {}
            }
        }
        
        &-result {
            border-top: 2px solid #e4e4e4;
            padding: 30rpx;
            
            &-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-bottom: 30rpx;
                margin-bottom: 30rpx;
                border-bottom: 1px solid #e4e4e4;
                
                .item-word {
                    flex: 1;
                    
                    view:nth-child(1) {
                        font-size: 28rpx;
                        color: #235790;
                        margin-bottom: 12rpx;
                    }
                    view:nth-child(2) {
                        font-size: 22rpx;
                        color: #898989;
                        
                        image {
                            width: 28rpx;
                            height: 16rpx;
                        }
                    }
                }
                
                text {
                    font-size: 50rpx;
                }
            }
        }
        
        &-suggest {
            border-top: 2px solid #e4e4e4;
            padding: 30rpx;
            font-size: 26rpx;
            
            &-head {
                color: #4574a5;
                margin-bottom: 74rpx;
            }
            
            &-item {
                color: #5d5d5d;
                margin-bottom: 74rpx;
                
                text {
                    color: #bdbdbd;
                    margin-right: 28rpx;
                    position: relative;
                    top: 2rpx;
                }
            }
        }
    }
</style>
